@extends('layouts.back_stage')
@section('content')
    <style>
    .input-item{width:200px;padding-right: 0;margin-right:10px;}
    [v-cloak] {display: none;}
    .shopBg{background:#fff;overflow: hidden;margin:10px 0 10px 0;}
    .centerLi{float:left;height:100px;width:33%;border-right:1px solid #000;text-align:center;}
    .centerLi>h3{line-height:100px}
    .shopBgleft{float:left;overflow: hidden;width:49.5%;padding:10px}
   .shopBgRight{float:right;overflow: hidden;width:50%;padding:10px}
   .selent{width:100%}
   ::-webkit-scrollbar {height: 8px;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 10px 0;overflow:hidden;"><h3 style="float:left;">查看包码转单据退单</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="guanLi" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin-top:10px;padding:9px 30px;background:#fff;">
                            <label>扫码人：</label>
                            <el-input  class="input-item"  disabled  v-model="deliver_name" placeholder="请输入扫码人" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <label>款号所在包码：</label>
                            <el-input class="input-item"  disabled  v-model="deliver_client" placeholder="请输入包码" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <label>扫描时间：</label>
                            <el-date-picker
                                v-model="deliver_time"
                                type="daterange"
                                size="small"
                                disabled
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                                </el-date-picker>
                            <div style="display:inline-block;padding:10px 0;float:right">
                                <el-button type="primary" style="text-align:right" @click="seek" disabled  size="small" >搜索</el-button>
                                <el-button  @click="reset"  type="primary"  disabled size="small">重置</el-button>
                                <el-button type="primary"  disabled @click="Memo" size="small">转到货单</el-button>
                            </div>
                        </div>
                          <el-dialog
                            title="提示"
                            :visible.sync="dialogVisible"
                            width="30%"
                            disabled
                            :before-close="handleClose">
                            <span>
                            <el-select  size="small" class="selent" disabled  v-model="aelect_type" @change="typeValue">
                                <el-option  v-for="itme in opt"  disabled  :key="itme.id" :value="itme.id" :label="itme.type">@{{itme.type}} </el-option>     
                            </el-select>
                            </span>
                            <span slot="footer" class="dialog-footer">
                                <el-button disabled type="primary"  @click="dialogVisible = false">取 消</el-button>
                                <el-button  disabled type="primary" @click="sibmin_x">确 定</el-button>
                            </span>
                            </el-dialog>
                   </div>
               <div class="shopBg">
                  <ul style="padding:10px;overflow: hidden"> 
                     <li class="centerLi">
                       <h3>包码数 :@{{tab1.length}}</h3> 
                     </li>
                     <li  class="centerLi"> 
                      <h3>款号数 :@{{tab1.length}}</h3>
                      </li>
                     <li  class="centerLi" style="border:none">
                     <h3>商品数 :@{{tab1Val}}</h3>
                     </li>
                  </ul> 
               </div> 
               <div class="shopBg shopBgleft">
               <template>
                    <el-table :data="tab1" border style="width: 100%" @cell-click="rowTab"  @selection-change="handleSelectionChange">
                        <el-table-column type="selection" align="center" :resizable='false'  width="40"> </el-table-column>
                        <el-table-column prop="packet_code" align="center" :resizable='false'  min-width="150" label="包码"  > </el-table-column>
                        <el-table-column prop="exists"  align="center" :resizable='false'  label="商品数" width="65"> </el-table-column>
                        <el-table-column prop="owner"  align="center" :resizable='false'  label="扫码人" width="65"> </el-table-column>
                        <el-table-column prop="updated_at" align="center" :resizable='false' min-width="150" label="扫码时间"> </el-table-column>
                        <el-table-column fixed="right"  label="操作"  align="center"  width="50">
                            <template slot-scope="scope">
                                <el-button @click="remove(scope)"  align="center"  disabled  type="text" size="small">删除</el-button>
                            </template>
                      </el-table-column>
                    </el-table>
                </template>
               </div>
               <div class="shopBg shopBgRight">
                 <template>
                    <el-table :data="tab2"  border style="width: 100%">
                    <el-table-column  prop="girard"  align="center" :resizable='false' label="款号" min-width="90"> </el-table-column>
                    <el-table-column prop="color" align="center"  :resizable='false' label="颜色" width="70"></el-table-column>
                    <el-table-column prop="size" align="center" :resizable='false'  label="尺码" width="60"> </el-table-column>
                    <el-table-column  prop="amount"  align="center"  :resizable='false' label="数量" width="70"> </el-table-column>
                    <el-table-column prop="code" align="center" :resizable='false'  label="条码" ></el-table-column>
                    <el-table-column prop="updated_at" align="center"  :resizable='false' label="扫码时间"> </el-table-column>
                    </el-table>
                 </template>
               </div>
            </div>
        </div>
        <!-- /主体-->
     </div>
    <script>
        new Vue({
            el: '#guanLi',
            data:{
                tab1: [],
                tab2:[],
                tab1Val:0,
                dialogVisible: false,//包码转单据对话框
                deliver_name:'',//搜索用的扫码人
                deliver_client:'',//搜索用的款号包码
                deliver_time:'',//搜索用的时间
                tab1Id:[],
                opt:[],//新增对话框里面的下拉
                aelect_type:"",//码转单据对话框仓库
                id:'',//仓库id、
                updateId:'',
                entrepot:[],
            },
            created(){
               
            },
            mounted(){
                this.updateId=window.location.href.split('display/')[1]
                this.respuert();
            },
            methods:{
                remove(scope){
                    let that=this
                    this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(() => {
                            that.tab1.forEach((item,idx)=>{
                                if(scope.row.id==item.id){
                                    that.tab1.splice(idx,1)
                                    return
                                }
                            })
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                     });
                },
                respuert(){
                    let that=this
                    let word={}
                    let aa=[]
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                           },
                        type: 'get',
                        url: `/distribute/return/show/${this.updateId}`,
                        data: {
                          
                        },
                        success: function (res) {
                            if(res.result.success=true){
                               for(var e in res.content.packets){
                                word={
                                    'packet_code':res.content.packets[e].packet_code,
                                    'exists':res.content.packets[e].exists,
                                    'owner':res.content.packets[e].owner.split(',')[1],
                                    'updated_at':res.content.packets[e].updated_at,
                                    'goods':res.content.packets[e].goods,
                                    'color':res.content.packets[e].color,
                                    'id':res.content.packets[e].id,
                                    'num':res.content.packets[e].num,
                                    'size':res.content.packets[e].size,
                                    'receipt':res.content.packets[e].receipt,
                                    'girard':res.content.packets[e].girard
                                    }
                                    aa.push(word)
                                    that.tab1=aa
                                    let  bb=[]
                                    for(var e in that.tab1){
                                            bb.push(that.tab1[e].exists)
                                        }
                                        sun=0
                                        for(var w in bb){
                                            sun+=bb[w]
                                        }
                                        that.tab1Val=sun
                               }
                            }else{ 
                                that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                 }); 
                            }
                        }
                    })
                },
               // 重置
             reset(){
                 this.deliver_name='',
                 this.deliver_client='',
                 this.deliver_time=''
                },
          // 新增仓库下拉选中之后的返回值
               typeValue(val){
                   this.id=val
               },
               //对话框提交
               sibmin_x(){
                   let that=this
                    if(this.id==''){
                            this.$notify({
                            title: '警告',
                            message: '请输要存入的仓库的项',
                            type: 'warning'
                            });
                        return false;
                        }
                     $.ajax({
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'put',
                            url:`/distribute/return/update`,
                            data:{
                                packets:this.tab1Id,
                                warehouse:this.id,
                                id:this.updateId
                            },
                            success:function(res){
                              if(res.result.success===true){
                                    that.dialogVisible=false
                                  window.location.href=`/distribute/return/indexpage`;
                                  that.$notify({
                                    title: '成功',
                                    message: '包码转单据成功',
                                    type: 'success'
                                    });
                                }else{
                                    that.$notify.error({
                                        title: '错误',
                                        message:`${res.result.result}`
                                    });
                                }
                            }
                     })
               },
              //对话框弹出时请求仓库
               demand(){
                let that=this
                        $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type:'get',
                        url:'/distribute/warehouse/index',
                        dataType:'json',
                    }).then(function(res){
                        that.opt=res.content
                        for(var e in that.opt){
                            that.entrepot.push({
                                text:that.opt[e].type,
                                value:that.opt[e].id,
                            })
                        }
                    })
               },
                //对话框的X
                handleClose(done) {
                    this.dialogVisible=false
                 },
                //tab1多选框
                handleSelectionChange(val){ 
                    this.tab1Id=[]
                    for(var e in val){
                        
                        this.tab1Id.push(val[e].id)
                    }
                },
                //包码转单据
                Memo(){
                    if(this.tab1Id==''){
                        this.$notify({
                        title: '警告',
                        message: '请输入包码转单的项',
                        type: 'warning'
                        });
                      return false;
                    }
                    this.dialogVisible=true,
                    this.demand();
                },
                //包码搜索
                seek(){
                    let that=this
                    opt=[]
                    aa=[]
                    list={}   
                    if(that.deliver_name=='' &&  that.deliver_client=='' && that.deliver_time==''){
                        this.$notify({
                        title: '警告',
                        message: '请输入要搜索的项',
                        type: 'warning'
                        });
                      return false;
                    }
                    $.ajax({
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'get',
                            url:`/packs/index`,
                            data:{
                                code:this.deliver_client,
                                name:this.deliver_name,
                                time:this.deliver_time,
                                scaned:1
                            },
                            success:function(res){
                               if(that.tab1==''){
                                   for(var e in res.content.data){
                                    list={
                                        'packet_code':res.content.data[e].packet_code,
                                        'exists':res.content.data[e].exists,
                                        'owner':res.content.data[e].owner.split(',')[1],
                                        'updated_at':res.content.data[e].updated_at,
                                        'goods':res.content.data[e].goods,
                                        'color':res.content.data[e].color,
                                        'id':res.content.data[e].id,
                                        'num':res.content.data[e].num,
                                        'size':res.content.data[e].size,
                                        'receipt':res.content.data[e].receipt,
                                        'girard':res.content.data[e].girard
                                        }
                                        aa=[]
                                    that.tab1.push(list)
                                        for(var e in that.tab1){
                                            aa.push(that.tab1[e].exists)
                                        }
                                        sun=0
                                        for(var w in aa){
                                            sun+=aa[w]
                                        }
                                        that.tab1Val=sun
                                   }
                               }else{
                              
                                    for(var w in that.tab1){
                                        if(that.deliver_client==that.tab1[w].packet_code){
                                            that.$notify({
                                                title: '警告',
                                                message: '你输入的包码已存在',
                                                type: 'warning'
                                              });
                                            return false;
                                        }else{
                                            for(var s in res.content.data){
                                               
                                                 for(var w in that.tab1){
                                                      if(res.content.data[s].packet_code==that.tab1[w].packet_code){
                                                        that.$notify({
                                                                title: '警告',
                                                                message: '你输入的包码已存在',
                                                                type: 'warning'
                                                            });
                                                            return false;
                                                       }else{
                                                         list={
                                                            'packet_code':res.content.data[s].packet_code,
                                                            'exists':res.content.data[s].exists,
                                                            'owner':res.content.data[s].owner.split(',')[1],
                                                            'updated_at':res.content.data[s].updated_at,
                                                            'goods':res.content.data[s].goods,
                                                            'color':res.content.data[s].color,
                                                            'id':res.content.data[s].id,
                                                            'num':res.content.data[s].num,
                                                            'size':res.content.data[s].size,
                                                            'receipt':res.content.data[s].receipt,
                                                            }
                                                            aa=[]
                                                        that.tab1.push(list)
                                                            for(var e in that.tab1){
                                                                aa.push(that.tab1[e].exists)
                                                            }
                                                            sun=0
                                                            for(var w in aa){
                                                                sun+=aa[w]
                                                            }
                                                            that.tab1Val=sun
                                                       }
                                                  
                                                 }
                                            }
                                            break;
                                        }
                                        break;
                                    }
                               }
                             }     
                     })
                },
                //表1 行被点击时
                rowTab(row){
                    text=[]
                    for(var e in row.goods){
                         text.push({
                             'girard':row.girard,
                            'color':row.color,
                            'size':row.goods[e].size,
                            'amount':1,
                            'code':row.goods[e].code,
                            'updated_at':row.updated_at,

                         })
                    }
                    this.tab2=text
                   
                },
            }
        });
    </script>
@endsection